<script setup lang="ts">

import {Close, FullScreen, Minus, MoreFilled} from "@element-plus/icons-vue";
import {onMounted} from "vue";
import {ipcRenderer} from "electron";

const {ipcRenderer} = require('electron')
onMounted(function () {
  document.getElementById('close')
      ?.addEventListener('click', (e) => {
        ipcRenderer.send('window-close')
      })
  document.getElementById('minus')
      ?.addEventListener('click', (e) => {
        ipcRenderer.send('window-min')
      })
  document.getElementById('full')
      ?.addEventListener('click', (e) => {
        ipcRenderer.send('window-max')
      })
})
</script>

<template>
  <div class="main">
    <el-header class="main-header border web-app-region-drag">
      <div class="main-header-name">大哥</div>
      <div class="main-header-icon">
        <div class="main-header-button">
          <el-button id="minus" type="text" class="web-app-region-no-drag">
            <el-icon color="#494949">
              <Minus/>
            </el-icon>
          </el-button>
          <el-button id="full" type="text" class="web-app-region-no-drag">
            <el-icon color="#494949">
              <FullScreen/>
            </el-icon>
          </el-button>
          <el-button id="close" type="text" class="web-app-region-no-drag">
            <el-icon color="#494949">
              <Close/>
            </el-icon>
          </el-button>
        </div>
        <div class="main-header-any">
          <el-button type="text" class="web-app-region-no-drag">
            <el-icon color="#515151">
              <MoreFilled/>
            </el-icon>
          </el-button>
        </div>
      </div>
    </el-header>
  </div>
</template>

<style scoped>


.main .main-header {
  height: 60px;
  background: #f5f5f5;
  display: flex;
}

.main .main-header .main-header-name {
  display: flex;
  align-items: center;
  font-size: 18px;
  width: 50%;
  margin-left: 20px;
}

.main .main-header .main-header-icon {
  padding-right: 10px;
  width: 50%;
}

.main .main-header .main-header-icon .main-header-any {
  display: flex;
  justify-content: right;
  height: 35px;
}

.main .main-header .main-header-icon .main-header-button {
  display: flex;
  justify-content: right;
  height: 25px;
}
</style>